<template>
  <!-- 职责详情 -->
  <div class="detail-content" v-html="content"></div>
</template>
<script>
export default {
  name: "dutyDetails",
  data() {
    return {
      content: ""
    };
  },
  mounted() {
    window.richTextAnalysis = this.richTextAnalysis;
  },
  methods: {
    richTextAnalysis(res) {
      this.content = this.imgTagAddStyle(res);
    },
    imgTagAddStyle(htmlStr) {
      // 正则匹配所有p标签
      var regP1 = new RegExp(
        "(i?)(\<p)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)",
        "gmi"
      );
      htmlStr = htmlStr.replace(regP1, '$2 style=""$3');
      var regP2 = new RegExp("(i?)(\<p.*?style=['\"])([^\>]+\>)", "gmi");
      htmlStr = htmlStr.replace(
        regP2,
        "$2margin:0;padding:0; margin-top: 10px;word-wrap:break-word;$3"
      );
      // 正则匹配所有img标签
      // var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
      // 正则匹配不含style="" 或 style='' 的img标签
      var regex1 = new RegExp(
        "(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)",
        "gmi"
      );
      // 给不含style="" 或 style='' 的img标签加上style=""
      htmlStr = htmlStr.replace(regex1, '$2 style=""$3');
      // 正则匹配含有style的img标签
      var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)", "gmi");
      // 在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;height:auto;border:5px solid red;)
      htmlStr = htmlStr.replace(regex2, "$2max-width:100%;height:auto;$3");
      // console.log("在img标签的style里面增加样式后的html字符串：" + htmlStr);
      return htmlStr;
    }
  }
};
</script>
<style lang="less" scoped>
.detail-content {
  padding: 0 16px 16px;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
</style>
